<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets">

<ui:composition template="/WEB-INF/templates/template_interno_padrao.xhtml">
	<ui:define name="metadata">
		<f:metadata>
			<f:viewParam name="acao" value="#{contratoBean.viewParamAcao}"/>
		</f:metadata>
	</ui:define>
	
	<ui:define name="titulo_pagina">
		<h:panelGroup id="titulo_pagina">
				<h3>#{contratoBean.subTituloPagina}</h3>
		</h:panelGroup>
	</ui:define>
	
	<ui:define name="conteudo">
		
		<h:form id="frmListagem">
			 
			<h:panelGroup rendered="#{contratoBean.estadoListagem}">
				
				<p:dataTable id="dtlista" value="#{contratoBean.contratos}" var="contrato" widgetVar="tabelaDeContratos" emptyMessage="NENHUM CONTRATO" cellpadding="5" border="1" >
					
					
        			<p:column headerText="Contrato">
						<h:outputText value="#{contrato.id}"/>
					</p:column>
					
					<p:column headerText="Estabelecimento" filterBy="#{contrato.estabelecimento.descricao}" filterMatchMode="contains">
						<h:outputText value="#{contrato.estabelecimento.descricao}"/>
					</p:column>
					
					<p:column headerText="Bairro">
						<h:outputText value="#{contrato.estabelecimento.endereco.bairro}"/>
					</p:column>
					
					<p:column headerText="Cliente" filterBy="#{contrato.contratante.nome}" filterMatchMode="contains">
						<h:outputText value="#{contrato.contratante.nome}"/>
					</p:column>
					
					<p:column headerText="CPF">
						<h:outputText value="#{contrato.contratante.cpfCnpj.numero}">
							<f:converter converterId="CpfCnpjConverter"/>
						</h:outputText>
					</p:column>
					
					<p:column headerText="Serviço">
						<h:outputText value="#{contrato.servico.tipo.descricao}"/>
					</p:column>
					
					<p:column headerText="Status contrato">
						<h:outputText value="#{contrato.situacao.descricao}"/>
					</p:column>
					
					<p:column headerText="Ação">
						<p:commandButton value="Editar | Visualizar" action="#{contratoBean.doEstadoEdicao}" update="@form :frmEdicao :titulo_pagina" icon="ui-icon-pencil" title="Editar">
							<f:setPropertyActionListener value="#{contrato}" target="#{contratoBean.contratoSelecionado}"/>
						</p:commandButton>
					</p:column>
					
				</p:dataTable>
			</h:panelGroup>
		</h:form>
		
		<h:form id="frmEdicao" class="form-horizontal">
			
			<h:panelGroup rendered="#{contratoBean.estadoEdicao}" >
				
				<div class="row-fluid">
					<div class="span12" >
						<h1 style="font-size: 2.5em; margin-bottom: 20px">Número do Contrato: #{contratoBean.contratoSelecionado.id}</h1>
					</div>
				</div>
				
				<div class="row-fluid">
					<div class="span12" >
						<div class="control-group">
						    <label class="control-label"><p:outputLabel value="Valor contrato"  for="vlrcontrato"/></label>
						    <div class="controls">
								<p:inputText id="vlrcontrato" label="Valor contrato" 
		            							value="#{contratoBean.contratoSelecionado.valorContrato}" 
		            							onkeypress="return validaInteiroEventoKeyPress(event)"
												onkeyup="formataOnKeyUp(event, this, MASCARA_REAL, 'D')"
												style="text-align: right"
												styleClass="input-medium" 
												maxlength="21">
									<f:convertNumber type="number" locale="pt_BR" minFractionDigits="2"/>
								</p:inputText>
						    </div>
					  	</div>
					  	<div class="control-group">
						    <label class="control-label"><p:outputLabel value="Data inicio serviço" for="dtinicioservpopup" /></label>
						    <div class="controls">
			    				<p:calendar id="dtinicioservpopup" value="#{contratoBean.contratoSelecionado.dataInicioVigencia}"   pages="2"  pattern="dd/MM/yyyy" navigator="true" locale="pt_BR" styleClass="input-medium"  />
						    </div>
					  	</div>
					  	<div class="control-group">
						    <label class="control-label"><p:outputLabel value="Data fim serviço" for="dtfimservpopup" rendered="#{contratoBean.contratoSelecionado.descontinuado}"/></label>
						    <div class="controls">
			    				<h:outputText id="dtfimservpopup" value="#{contratoBean.contratoSelecionado.dataFimVigencia}" rendered="#{contratoBean.contratoSelecionado.descontinuado}">
			    					<f:convertDateTime pattern="dd/MM/yyyy" />
			    				</h:outputText>
						    </div>
					  	</div>
					  	<div class="control-group">
						    <label class="control-label"><p:outputLabel value="Status"/></label>
						    <div class="controls">
									<h:outputText value="#{contratoBean.contratoSelecionado.situacao.descricao}" styleClass="status_contrato"/>
									&nbsp;
									<h:commandButton value="Ativar contrato" actionListener="#{contratoBean.doAtivarContrato}" styleClass="btn btn-large btn-success" rendered="#{contratoBean.contratoSelecionado.emProcesso}">
										<f:ajax execute="@form" render="@form :mensagens :growl"/>
									</h:commandButton>
									&nbsp;
									<h:commandButton value="Cancelar contrato" actionListener="#{contratoBean.doCancelarContrato}" styleClass="btn btn-large btn-danger" rendered="#{contratoBean.contratoSelecionado.emProcesso}">
										<f:ajax render="@form"/>
									</h:commandButton>
									&nbsp;
									<p:commandButton value="Finalizar prestação de serviço" oncomplete="dlgDataFinalPrestacaoServico.show()" rendered="#{contratoBean.contratoSelecionado.ativo}"/>
									
						    </div>
					  	</div>
					  	
					  	<fieldset>
					  		<legend>Serviço</legend>
					  		
						  	<div class="control-group">
							    <label class="control-label"><p:outputLabel value="Serviço"/></label>
							    <div class="controls">
				    				<h:inputText value="#{contratoBean.contratoSelecionado.servico.tipo.descricao}" disabled="true" />
							    </div>
						  	</div>
						  	<h:panelGroup rendered="#{contratoBean.contratoSelecionado.servicoLimpezaContratado}">
							  	<div class="control-group">
								    <label class="control-label"><p:outputLabel value="Quant. horas dia" for="qtdhorasdia_" /></label>
								    <div class="controls">
										<p:inputText id="qtdhorasdia_"  label="Quant. horas dia" 
													value="#{contratoBean.contratoSelecionado.novaQtdHorasServicoLimpeza}" 
													onkeypress="return validaInteiroEventoKeyPress(event)"
													validatorMessage="A quantidade de horas dia é de no máximo [24]"
													styleClass="span12" style="width:10em;" rendered="#{contratoBean.contratoSelecionado.servicoLimpezaContratado}">
											<f:convertNumber type="number" minFractionDigits="0"/>
											<f:validateLongRange minimum="0" maximum="24"/>
										</p:inputText>
								    </div>
							  	</div>
							  	<div class="control-group">
								    <label class="control-label"><p:outputLabel value="Agenda" for="agendasemanal" /></label>
								    <div class="controls">
						           		<p:selectManyCheckbox  id="agendasemanal" value="#{contratoBean.diasSemanaSelecionado}"  converter="omnifaces.GenericEnumConverter" layout="pageDirection" rendered="#{contratoBean.contratoSelecionado.servicoLimpezaContratado}">  
											<f:selectItems value="#{contratoBean.diasSemana}"/>
							        	</p:selectManyCheckbox> 
								    </div>
						  		</div>
						  		<div class="control-group">
								    <label class="control-label">Serviço Extra</label>
								    <div class="controls">
						          		<p:commandButton value="Novo serviço auxiliar" onclick="dlgTipoServicoExtra.show()">
											<f:ajax render="@form :growl"/>
										</p:commandButton>
						          		<p:dataTable id="servicosExtras" value="#{contratoBean.contratoSelecionado.servico.servicosExtras}"   var="servicoExtra" rendered="#{contratoBean.contratoSelecionado.servico.servicosExtras != null}">
						          		  
						          			<f:facet name="header">
						          				Lista de serviços auxiliares
						          			</f:facet>
						          			
						          			<p:column headerText="Serviço auxiliar">  
		            							<h:outputLabel value="#{servicoExtra.tipo.descricao}" />  
		        							</p:column>  
						          			
						          			<p:column headerText="Periodicidade">  
		            							<h:selectOneMenu value="#{servicoExtra.periodicidade}"  required="true" requiredMessage="Entre com  periodicidade do serviço auxiliar">
		            								<f:selectItem itemLabel=" " itemValue="#{null}"/>  
									            	<f:selectItems value="#{contratoBean.periodicidades}"/>
									            	<f:converter converterId="omnifaces.GenericEnumConverter"/>   
									            </h:selectOneMenu>    
		        							</p:column>  
						          			
						          		</p:dataTable>
								    </div>
						  		</div>
						  	</h:panelGroup>
					  	</fieldset>
					  	
					  	
					  	<fieldset>
					  		<legend>Estabelecimento</legend>
							  	<div class="control-group">
								    <label class="control-label"><p:outputLabel value="Tipo de Estabelecimento" for="optTipoEstabelecimento_"/></label>
								    <div class="controls">
										<p:selectOneMenu id="optTipoEstabelecimento_" value="#{contratoBean.contratoSelecionado.estabelecimento.tipo}" required="false" requiredMessage="Selecione o tipo de estabelecimento"  style="width:16em;">  
								            <f:selectItems value="#{contratoBean.tiposEstabelecimentos}"/>
								            <f:converter converterId="omnifaces.GenericEnumConverter"/> 
								        </p:selectOneMenu>  
								        <h:inputText value="#{contratoBean.contratoSelecionado.estabelecimento.tipo.descricao}"  disabled="#{!contratoBean.contratoSelecionado.servicoLimpezaContratado}" style="width:16em;"/>
								    </div>
							  	</div>
					  			<div class="control-group">
								    <label class="control-label"><p:outputLabel value="Descrição" for="descricoEstabelecimento_" /></label>
								    <div class="controls">
										<p:inputText id="descricoEstabelecimento_" label="Descrição" value="#{contratoBean.contratoSelecionado.estabelecimento.descricao}" required="false" requiredMessage="Entre com o nome do local" style="width: 40%;" maxlength="70"/>
								    </div>
							  	</div>
					  			<div class="control-group">
								    <label class="control-label"><p:outputLabel value="Tipo Logradouro" for="tipoLograd_" /></label>
								    <div class="controls">
										<p:selectOneMenu id="tipoLograd_" value="#{contratoBean.contratoSelecionado.estabelecimento.endereco.tipoLogradouro}" required="true" requiredMessage="Entre com o tipo de logradouro" style="width:12em;">  
							            	<f:selectItems  value="#{contratoBean.tiposLogradouros}" var="tipoLograd" itemValue="#{tipoLograd}" itemLabel="#{tipoLograd.descricao}"/>
							        	</p:selectOneMenu>  
								    </div>
							  	</div>
							  	<div class="control-group">
								    <label class="control-label"><p:outputLabel value="Logradouro" for="logradouro_" /></label>
								    <div class="controls">
										<p:inputText id="logradouro_" label="Logradouro" value="#{contratoBean.contratoSelecionado.estabelecimento.endereco.logradouro}"  style="width: 40%;" maxlength="70"/>
								    </div>
							  	</div>
							  	<div class="control-group">
								    <label class="control-label"><p:outputLabel value="Numero" for="numlograd_" /></label>
								    <div class="controls">
							    		<p:inputMask id="numlograd_"  label="Numero" mask="?9999999" value="#{contratoBean.contratoSelecionado.estabelecimento.endereco.numero}" style="width:8em;" />
								    </div>
							  	</div>
							  	<div class="control-group">
								    <label class="control-label"><p:outputLabel value="Complemento" for="compllograd_"/></label>
								    <div class="controls">
										<p:inputText id="compllograd_" label="Complemento" value="#{contratoBean.contratoSelecionado.estabelecimento.endereco.complemento}" style="width: 20%;" maxlength="20"/>
								    </div>
							  	</div>
							  	<div class="control-group">
								    <label class="control-label"><p:outputLabel value="Bairro" for="bairro_" /></label>
								    <div class="controls">
										<p:inputText id="bairro_" label="Bairro" value="#{contratoBean.contratoSelecionado.estabelecimento.endereco.bairro}"  style="width: 30%;" maxlength="50"/>
								    </div>
							  	</div>
							  	<div class="control-group">
								    <label class="control-label"><p:outputLabel value="Municipio" for="municipio_" /></label>
								    <div class="controls">
										<p:inputText id="municipio_" label="Municipio" value="#{contratoBean.contratoSelecionado.estabelecimento.endereco.municipio}" style="width: 30%;"  maxlength="50"/>
								    </div>
							  	</div>
							  	<div class="control-group">
								    <label class="control-label"><p:outputLabel value="UF" for="ufEndEstabelecimento_"/></label>
								    <div class="controls">
							    		<p:selectOneMenu id="ufEndEstabelecimento_" value="#{contratoBean.contratoSelecionado.estabelecimento.endereco.uf}" required="false" requiredMessage="Selecione a UF"  style="width:14em;">
							    			<f:selectItems  value="#{contratoBean.ufs}" var="uf" itemValue="#{uf}" itemLabel="#{uf.nomeUF}"/>
							    		</p:selectOneMenu>
								    </div>
							  	</div>
							  	<div class="control-group">
								    <label class="control-label"><p:outputLabel value="CEP" for="cep_" /></label>
								    <div class="controls">
										<p:inputMask id="cep_" mask="99999-999" value="#{contratoBean.contratoSelecionado.estabelecimento.endereco.cep}" style="width: 8%;" />
								    </div>
							  	</div>
							  	
							  	
					  	</fieldset>
					  	
					  	 
					  	<h:panelGroup id="infoCliente">
						  	<fieldset>
						  		<legend>Cliente</legend>
								  	<div class="control-group">
									    <label class="control-label"><p:outputLabel value="Tipo de Cliente" for="tipoCliente"/> </label>
									    <div class="controls">
									        <p:selectOneRadio id="tipoCliente" value="#{contratoBean.contratoSelecionado.contratante.tipoCliente}"  required="true" requiredMessage="Entre com o [Tipo de Cliente]">
									            <f:selectItems value="#{contratoBean.tipoClienteItens}"/> 
									            <f:converter converterId="omnifaces.GenericEnumConverter"/> 
									            <f:ajax execute="@this" render=":frmEdicao:infoCliente"/>
									        </p:selectOneRadio>  
									    </div>
								  	</div>
								  	<h:panelGroup rendered="#{contratoBean.contratoSelecionado.contratante.pessoaFisica}">
							  			<div class="control-group">
										    <label class="control-label"><p:outputLabel value="CPF" for="cpf"  /></label>
										    <div class="controls">
												<p:inputMask id="cpf" mask="999.999.999-99" value="#{contratoBean.contratoSelecionado.contratante.cpfCnpj.numero}" valueChangeListener="#{contratoBean.cpfCnpjContratanteAlterado}" required="true" requiredMessage="Entre com o CPF" style="width: 10%">
													<f:converter converterId="CpfCnpjConverter"/>
													<f:validator validatorId="CpfCnpjValidator"/>
													<f:ajax execute="@this" render=":frmEdicao:infoCliente"/>
												</p:inputMask>
										    </div>
									  	</div>
								  	</h:panelGroup>
								  	<h:panelGroup rendered="#{!contratoBean.contratoSelecionado.contratante.pessoaFisica}">
							  			<div class="control-group">
										    <label class="control-label"><p:outputLabel value="CNPJ" for="cnpj"/></label>
										    <div class="controls">
												<p:inputMask id="cnpj" mask="99.999.999/9999-99" value="#{contratoBean.contratoSelecionado.contratante.cpfCnpj.numero}" valueChangeListener="#{contratoBean.cpfCnpjContratanteAlterado}" required="true" requiredMessage="Entre com o CNPJ" style="width: 12%">
													<f:converter converterId="CpfCnpjConverter"/>
													<f:validator validatorId="CpfCnpjValidator"/>
													<f:ajax execute="@this" render=":frmEdicao:infoCliente"/>
												</p:inputMask>
										    </div>
									  	</div>
								  	</h:panelGroup>
						  			<div class="control-group">
									    <label class="control-label"><p:outputLabel value="Nome" for="nomeCliente" /></label>
									    <div class="controls">
											<p:inputText id="nomeCliente" label="Nome" value="#{contratoBean.contratoSelecionado.contratante.nome}" required="true" requiredMessage="Entre com o nome do contratante" style="width:40%" maxlength="70"/>
									    </div>
								  	</div>
								  	<div class="control-group">
									    <label class="control-label"><p:outputLabel value="Sexo" for="sexoCliente"/> </label>
									    <div class="controls">
									        <p:selectOneMenu id="sexoCliente" value="#{contratoBean.contratoSelecionado.contratante.sexo}" required="true" requiredMessage="Entre com o [sexo] do cliente" style="width: 14em" >   
									            <f:selectItems value="#{contratoBean.tiposDeSexo}"/> 
									            <f:converter converterId="omnifaces.GenericEnumConverter"/> 
									        </p:selectOneMenu>  
									    </div>
								  	</div>
								  	<div class="control-group">
									    <label class="control-label"><p:outputLabel value="Tipo Logradouro" for="tipoLogradCli" /></label>
									    <div class="controls">
											<p:selectOneMenu id="tipoLogradCli" value="#{contratoBean.contratoSelecionado.contratante.endereco.tipoLogradouro}" required="true" requiredMessage="Entre com o tipo de logradouro" style="width:10.5em;">  
									            <f:selectItems  value="#{contratoBean.tiposLogradouros}" var="tipoLograd" itemValue="#{tipoLograd}" itemLabel="#{tipoLograd.descricao}"/>
									        </p:selectOneMenu>  
									    </div>
								  	</div>
								  	<div class="control-group">
									    <label class="control-label"><p:outputLabel value="Logradouro" for="logradouroCli" /></label>
									    <div class="controls">
											<p:inputText id="logradouroCli" label="Logradouro" value="#{contratoBean.contratoSelecionado.contratante.endereco.logradouro}" required="true" requiredMessage="Entre com o logradouro" style="width: 40%" maxlength="70"/>
									    </div>
								  	</div>
								  	<div class="control-group">
									    <label class="control-label"><p:outputLabel value="Numero" for="numlogradCli" /></label>
									    <div class="controls">
											<p:inputMask id="numlogradCli"  label="Numero" mask="?9999999" value="#{contratoBean.contratoSelecionado.contratante.endereco.numero}" style="width: 5%"/>
									    </div>
								  	</div>
								  	<div class="control-group">
									    <label class="control-label"><p:outputLabel value="Complemento" for="compllogradCli" /></label>
									    <div class="controls">
											<p:inputText id="compllogradCli" label="Complemento" value="#{contratoBean.contratoSelecionado.contratante.endereco.complemento}" styleClass="input-xlarge" maxlength="20"/>
									    </div>
								  	</div>
								  	<div class="control-group">
									    <label class="control-label"><p:outputLabel value="Bairro" for="bairroCli" /></label>
									    <div class="controls">
											<p:inputText id="bairroCli" label="Bairro" value="#{contratoBean.contratoSelecionado.contratante.endereco.bairro}" required="true" requiredMessage="Entre com o nome do bairro" style="width: 30%" maxlength="50"/>
									    </div>
								  	</div>
								  	<div class="control-group">
									    <label class="control-label"><p:outputLabel value="Municipio" for="municipioCli" /></label>
									    <div class="controls">
											<p:inputText id="municipioCli" label="Municipio" value="#{contratoBean.contratoSelecionado.contratante.endereco.municipio}" required="true" requiredMessage="Entre com o nome da cidade" style="width: 30%" maxlength="50"/>
									    </div>
								  	</div>
								  	<div class="control-group">
									    <label class="control-label"><p:outputLabel value="CEP" for="cepCli" /></label>
									    <div class="controls">
											<p:inputMask id="cepCli" mask="99999-999" value="#{contratoBean.contratoSelecionado.contratante.endereco.cep}" required="true" requiredMessage="Entre com o cep da cidade" style="width: 10%"/>					
									    </div>
								  	</div>
								  	<div class="control-group">
									    <label class="control-label"><p:outputLabel value="UF" for="ufEndCli"/></label>
									    <div class="controls">
								    		<p:selectOneMenu id="ufEndCli" value="#{contratoBean.contratoSelecionado.contratante.endereco.uf}" required="true" requiredMessage="Selecione a UF" style="width:15em;">
								    			<f:selectItems  value="#{contratoBean.ufs}" var="uf" itemValue="#{uf}" itemLabel="#{uf.nomeUF}"/>
								    		</p:selectOneMenu>
									    </div>
								  	</div>
								  	<div class="control-group">
									    <label class="control-label"><p:outputLabel value="Telefone residencial" for="foneRes"/></label>
									    <div class="controls">
											<p:inputMask id="foneRes" value="#{contratoBean.contratoSelecionado.contratante.telefoneRes}" mask="(999) 999-9999" style="width:10%"/>
									    </div>
								  	</div>
								  	<div class="control-group">
									    <label class="control-label"><p:outputLabel value="Celular" for="foneCel"/></label>
									    <div class="controls">
											<p:inputMask id="foneCel" label="Celular" value="#{contratoBean.contratoSelecionado.contratante.telefoneCel}" mask="(999) 999-9999" style="width:10%"/>
									    </div>
								  	</div>
								  	<div class="control-group">
									    <label class="control-label"><p:outputLabel value="E-Mail" for="emailContratante" /></label>
									    <div class="controls">
						    				<p:inputText id="emailContratante" 
															 label="email" 
															 value="#{contratoBean.contratoSelecionado.contratante.email}"
															 validatorMessage="e-Mail inválido" 
															 style="width:40%"
															 maxlength="70">
													<f:validateRegex pattern="[a-zA-Z0-9\-\_\.]+@[a-zA-Z0-9\-\_\.]+" />
											</p:inputText>
									    </div>
								  	</div>
								  	
						  	</fieldset>
					  	</h:panelGroup>
					  	
					  	<fieldset>
					  		<legend>Observaçãoi</legend>
					  		<div class="control-group">
								    <label class="control-label"></label>
								    <div class="controls">
										<p:tab title="Observação">
											<h:inputTextarea id="observacao" rows="20" cols="100"  value="#{contratoBean.contratoSelecionado.observacao}" style="width: 99%" />
										</p:tab>
								    </div>
							  	</div>
					  	</fieldset>
					</div>
				</div>
				
				
				<br/>
				<div class="hero-unit">
					<h:commandButton action="#{contratoBean.doEstadoListagem}" value="Retornar"  immediate="true" styleClass="btn btn-large btn-inverse">
						<f:ajax render="@form :mensagens :titulo_pagina :frmListagem"/>
					</h:commandButton>
					&nbsp;
					<h:commandButton value="Atualizar" actionListener="#{contratoBean.doSalvarEdicao}" styleClass="btn btn-large btn-primary" rendered="#{!contratoBean.contratoSelecionado.cancelado and !contratoBean.contratoSelecionado.descontinuado}">
						<f:ajax execute="@form" render="@form :growl :mensagens"/>
					</h:commandButton>
				</div>
			
			</h:panelGroup>
		</h:form>
		
		
		
		<!-- Novo Contrato	-->
		<h:form id="frmNovo">
				
			<h:panelGroup rendered="#{contratoBean.estadoNovo}">
				<p:wizard widgetVar="wiz"  flowListener="#{contratoBean.onFlowProcess}" backLabel="Aba anterior" nextLabel="Próxima aba">
           		
         		 	<p:tab id="tabEstabelecimento" title="Estabelecimento">  
           				<p:panel header="Estabelecimento">  
		                	<h:panelGrid columns="2" cellpadding="2" columnClasses="rotulo,campo"> 
							
								<p:outputLabel value="Tipo de Estabelecimento" for="optTipoEstabelecimento" />
								<p:selectOneMenu id="optTipoEstabelecimento" value="#{contratoBean.contratoSelecionado.estabelecimento.tipo}" required="true" requiredMessage="Selecione o tipo de estabelecimento" style="width:15em;">  
						            <f:selectItems value="#{contratoBean.tiposEstabelecimentos}"/>
						            <f:converter converterId="omnifaces.GenericEnumConverter"/> 
						        </p:selectOneMenu>    
								
								<p:outputLabel value="Descrição" for="descricoEstabelecimento" />
								<p:inputText id="descricoEstabelecimento" label="Descrição" value="#{contratoBean.contratoSelecionado.estabelecimento.descricao}" required="true" requiredMessage="Entre com o nome do local" styleClass="input-xxlarge" maxlength="70"/>
								
								<p:outputLabel value="Tipo Logradouro" for="tipoLograd" />
								<p:selectOneMenu id="tipoLograd" value="#{contratoBean.contratoSelecionado.estabelecimento.endereco.tipoLogradouro}" required="true" requiredMessage="Entre com o tipo de logradouro" style="width:10.5em;">  
						            <f:selectItems  value="#{contratoBean.tiposLogradouros}" var="tipoLograd" itemValue="#{tipoLograd}" itemLabel="#{tipoLograd.descricao}"/>
						        </p:selectOneMenu>  
								
					    		<p:outputLabel value="Logradouro" for="logradouro" />
								<p:inputText id="logradouro" label="Logradouro" value="#{contratoBean.contratoSelecionado.estabelecimento.endereco.logradouro}" required="true" requiredMessage="Entre com o logradouro" styleClass="input-xxlarge" maxlength="70"/>
					    		
								<p:outputLabel value="Numero" for="numlograd" />
								<p:inputMask id="numlograd"  label="Numero" mask="?9999999" value="#{contratoBean.contratoSelecionado.estabelecimento.endereco.numero}" size="50"/>
								
								<p:outputLabel value="Complemento" for="compllograd" />
								<p:inputText id="compllograd" label="Complemento" value="#{contratoBean.contratoSelecionado.estabelecimento.endereco.complemento}" styleClass="input-xlarge" maxlength="20"/>
								
								<p:outputLabel value="Bairro" for="bairro" />
								<p:inputText id="bairro" label="Bairro" value="#{contratoBean.contratoSelecionado.estabelecimento.endereco.bairro}" required="true" requiredMessage="Entre com o nome do bairro" styleClass="input-xlarge" maxlength="50"/>
								
								<p:outputLabel value="Municipio" for="municipio" />
								<p:inputText id="municipio" label="Municipio" value="#{contratoBean.contratoSelecionado.estabelecimento.endereco.municipio}" required="true" requiredMessage="Entre com o nome da cidade" styleClass="input-xlarge" maxlength="50"/>
								
								<p:outputLabel value="CEP" for="cep" />
								<p:inputMask id="cep" mask="99999-999" value="#{contratoBean.contratoSelecionado.estabelecimento.endereco.cep}" required="true" requiredMessage="Entre com o cep da cidade"/>
								
								<p:outputLabel value="UF" for="ufEndEstabelecimento"/>
					    		<p:selectOneMenu id="ufEndEstabelecimento" value="#{contratoBean.contratoSelecionado.estabelecimento.endereco.uf}" required="true" requiredMessage="Selecione a UF" style="width:15em;">
					    			<f:selectItems  value="#{contratoBean.ufs}" var="uf" itemValue="#{uf}" itemLabel="#{uf.nomeUF}"/>
					    		</p:selectOneMenu>
						    				 
							</h:panelGrid>
          		 			</p:panel> 
      				</p:tab>  
           		
            		<p:tab id="tabSelecionaServico" title="Serviço"> 
            			<p:panel header="Selecione o Serviço">  
			                <h:panelGrid columns="2" cellpadding="2" columnClasses="rotulo,campo">  
			                    <p:selectOneRadio id="optServico" value="#{contratoBean.tipoServicoSelecionado}" valueChangeListener="#{contratoBean.tipoServicoAlterado}" required="true" requiredMessage="Selecione o tipo de serviço">  
						            <f:selectItems value="#{contratoBean.tiposServicos}"/>
						            <f:converter converterId="omnifaces.GenericEnumConverter"/>
						            <p:ajax event="change" update="@form"/>
						        </p:selectOneRadio>    
			                </h:panelGrid>
			                <p:message for="optServico"/>  
           		 		</p:panel>  
           		 	</p:tab>
          		 	
          		 	
           		 	<p:tab id="tabLimpCons" title="Limpeza e conservação" rendered="#{contratoBean.servicoLimpezaFoiSelecionado}">
           		 		<p:messages/> 
           		 		<p:panel header="Quantidade de horas dia">
	           		 		<h:panelGrid columns="2" cellpadding="2" columnClasses="rotulo,campo">
	           		 			<p:outputLabel value="Quant. horas dia" for="qtdhorasdia" />
								<p:inputText id="qtdhorasdia"  label="Quant. horas dia" 
											value="#{contratoBean.qtdHorasDia}" 
											onkeypress="return validaInteiroEventoKeyPress(event)"
											validatorMessage="A quantidade de horas dia é de no máximo [24]"
											styleClass="input-small">
									<f:convertNumber type="number" minFractionDigits="0"/>
									<f:validateLongRange minimum="0" maximum="24"/>
								</p:inputText>
	           		 		</h:panelGrid>
           		 		</p:panel>
          		 		
          		 		
           		 		<p:panel header="Agenda semanal">
	           		 		<p:selectManyCheckbox  id="agendasemanal" value="#{contratoBean.diasSemanaSelecionado}"  converter="omnifaces.GenericEnumConverter">  
						            <f:selectItems value="#{contratoBean.diasSemana}"/>
	        				</p:selectManyCheckbox> 
           		 		</p:panel>
          		 		
           		 		<p:panel header="Serviços extras">
           		 		</p:panel>
          		 		</p:tab>
          		 		
            		<p:tab id="tabContratante" title="Contratante">
            			<p:panel  id="infoPessoal" header="Informações pessoais">
				            <h:panelGrid columns="2" cellpadding="2" columnClasses="rotulo,campo">
				            
				            	<p:outputLabel value="Tipo de Cliente" for="tipoCliente"/>  
						        <p:selectOneRadio id="tipoCliente" value="#{contratoBean.contratoSelecionado.contratante.tipoCliente}"  required="true" requiredMessage="Entre com o [Tipo de Cliente]">
						            <f:selectItems value="#{contratoBean.tipoClienteItens}"/> 
						            <f:converter converterId="omnifaces.GenericEnumConverter"/> 
						            <f:ajax execute="@this" render="frmNovo:infoPessoal"/>
						        </p:selectOneRadio>  
				            	
								<p:outputLabel value="CPF" for="cpf"  rendered="#{contratoBean.contratoSelecionado.contratante.pessoaFisica}"/>
								<p:inputMask id="cpf" mask="999.999.999-99" value="#{contratoBean.contratoSelecionado.contratante.cpfCnpj.numero}" valueChangeListener="#{contratoBean.cpfCnpjContratanteAlterado}" required="true" requiredMessage="Entre com o CPF"  rendered="#{contratoBean.contratoSelecionado.contratante.pessoaFisica}">
									<f:converter converterId="CpfCnpjConverter"/>
									<f:validator validatorId="CpfCnpjValidator"/>
									<f:ajax render="frmNovo:infoPessoal"/>
								</p:inputMask>
								
								<p:outputLabel value="CNPJ" for="cnpj"  rendered="#{!contratoBean.contratoSelecionado.contratante.pessoaFisica}"/>
								<p:inputMask id="cnpj" mask="99.999.999/9999-99" value="#{contratoBean.contratoSelecionado.contratante.cpfCnpj.numero}" valueChangeListener="#{contratoBean.cpfCnpjContratanteAlterado}" required="true" requiredMessage="Entre com o CPF"  rendered="#{!contratoBean.contratoSelecionado.contratante.pessoaFisica}">
									<f:converter converterId="CpfCnpjConverter"/>
									<f:validator validatorId="CpfCnpjValidator"/>
									<f:ajax render="frmNovo:infoPessoal"/>
								</p:inputMask>
								
								<p:outputLabel value="Nome" for="nome" />
								<p:inputText id="nome" 
											 label="Nome" 
											 value="#{contratoBean.contratoSelecionado.contratante.nome}" 
											 required="true"
											 requiredMessage="Entre com o nome do contratante" 
											 styleClass="input-xxlarge"
											 maxlength="70"/>
								
								
								
								<p:outputLabel value="Sexo" for="sexo"/>  
						        <p:selectOneMenu id="sexo" value="#{contratoBean.contratoSelecionado.contratante.sexo}" required="true" requiredMessage="Entre com o [sexo] do cliente">
						        	<f:selectItem itemLabel=" " itemValue="#{null}"/>   
						            <f:selectItems value="#{contratoBean.tiposDeSexo}"/> 
						            <f:converter converterId="omnifaces.GenericEnumConverter"/> 
						        </p:selectOneMenu>  
								
								
								<p:outputLabel value="Tipo Logradouro" for="tipoLogradCli" />
								<h:panelGroup>
									<p:selectOneMenu id="tipoLogradCli" value="#{contratoBean.contratoSelecionado.contratante.endereco.tipoLogradouro}" required="true" requiredMessage="Entre com o tipo de logradouro" style="width:10.5em;">  
							            <f:selectItems  value="#{contratoBean.tiposLogradouros}" var="tipoLograd" itemValue="#{tipoLograd}" itemLabel="#{tipoLograd.descricao}"/>
							        </p:selectOneMenu>  
									<h:commandLink  actionListener="#{contratoBean.copiarEnderecoEstabelecimentoParaContratante}" value="Copiar endereço do estabelecimento" immediate="true" style="padding-left:1%; font-size: 1.3em">
										<f:ajax execute="@this" render="frmNovo:tipoLogradCli frmNovo:logradouroCli frmNovo:numlogradCli compllogradCli frmNovo:bairroCli frmNovo:municipioCli frmNovo:cepCli frmNovo:ufEndCli "/>
									</h:commandLink>
								</h:panelGroup>
								
					    		<p:outputLabel value="Logradouro" for="logradouroCli" />
								<p:inputText id="logradouroCli" label="Logradouro" value="#{contratoBean.contratoSelecionado.contratante.endereco.logradouro}" required="true" requiredMessage="Entre com o logradouro" styleClass="input-xxlarge" maxlength="70"/>
								
					    		
								<p:outputLabel value="Numero" for="numlogradCli" />
								<p:inputMask id="numlogradCli"  label="Numero" mask="?9999999" value="#{contratoBean.contratoSelecionado.contratante.endereco.numero}" size="50"/>
								
								<p:outputLabel value="Complemento" for="compllogradCli" />
								<p:inputText id="compllogradCli" label="Complemento" value="#{contratoBean.contratoSelecionado.contratante.endereco.complemento}" styleClass="input-xlarge" maxlength="20"/>
								
								<p:outputLabel value="Bairro" for="bairroCli" />
								<p:inputText id="bairroCli" label="Bairro" value="#{contratoBean.contratoSelecionado.contratante.endereco.bairro}" required="true" requiredMessage="Entre com o nome do bairro" styleClass="input-xlarge" maxlength="50"/>
								
								<p:outputLabel value="Municipio" for="municipioCli" />
								<p:inputText id="municipioCli" label="Municipio" value="#{contratoBean.contratoSelecionado.contratante.endereco.municipio}" required="true" requiredMessage="Entre com o nome da cidade" styleClass="input-xlarge" maxlength="50"/>
								
								<p:outputLabel value="CEP" for="cepCli" />
								<p:inputMask id="cepCli" mask="99999-999" value="#{contratoBean.contratoSelecionado.contratante.endereco.cep}" required="true" requiredMessage="Entre com o cep da cidade"/>
								
								<p:outputLabel value="UF" for="ufEndCli"/>
					    		<p:selectOneMenu id="ufEndCli" value="#{contratoBean.contratoSelecionado.contratante.endereco.uf}" required="true" requiredMessage="Selecione a UF" style="width:15em;">
					    			<f:selectItems  value="#{contratoBean.ufs}" var="uf" itemValue="#{uf}" itemLabel="#{uf.nomeUF}"/>
					    		</p:selectOneMenu>
								
								
			    				<p:outputLabel value="Telefone" for="foneres" />
			    				<p:inputMask id="foneres" value="#{contratoBean.contratoSelecionado.contratante.telefoneRes}" mask="(999) 999-9999" size="15"/>
			    				
			    				<p:outputLabel value="Celular" for="cel" />
			    				<p:inputMask id="cel" label="Celular" value="#{contratoBean.contratoSelecionado.contratante.telefoneCel}" mask="(999) 999-9999" size="15"/>
			    				
			    				<p:outputLabel value="E-Mail" for="emailContratante" />
			    				<p:inputText id="emailContratante" 
												 label="email" 
												 value="#{contratoBean.contratoSelecionado.contratante.email}"
												 validatorMessage="e-Mail inválido" 
												 styleClass="input-xxlarge"
												 maxlength="70">
										<f:validateRegex pattern="[a-zA-Z0-9\-\_\.]+@[a-zA-Z0-9\-\_\.]+" />
								</p:inputText>
				        	</h:panelGrid>
				    	</p:panel>
            		</p:tab>
           		
            		<p:tab id="tabContrato" title="Contrato">
            			<p:panel header="Contrato">
	            			<h:panelGrid columns="2" cellpadding="2" columnClasses="rotulo,campo">
	            				<p:outputLabel value="Valor contrato"  for="vlrcontrato"/>
	            				<h:panelGroup>
		            				<p:inputText id="vlrcontrato" label="Valor contrato" 
		            							value="#{contratoBean.contratoSelecionado.valorContrato}" 
		            							validatorMessage="Entre com o valor do serviço"
		            							onkeypress="return validaInteiroEventoKeyPress(event)"
												onkeyup="formataOnKeyUp(event, this, MASCARA_REAL, 'D')"
												style="text-align: right" 
												size="21" maxlength="21">
										<f:convertNumber type="number" locale="pt_BR" minFractionDigits="2"/>
										<f:validateDoubleRange minimum="0.1"/>
									</p:inputText>
			            			<p:message for="vlrcontrato"/>
	            				</h:panelGroup>
									
								<p:outputLabel value="Data inicio serviço" for="dtinicioservpopup" />
								<p:calendar id="dtinicioservpopup" value="#{contratoBean.contratoSelecionado.dataInicioVigencia}"  mode="popup" showOn="button" pages="2"  pattern="dd/MM/yyyy" navigator="true" locale="pt_BR" showButtonPanel="true"/>
								
								<h:outputText value="Observação" for="observacao"/>
			  					<h:inputTextarea id="observacao" rows="6" cols="100"  value="#{contratoBean.contratoSelecionado.observacao}" autoResize="false" style="width: 100%"/>
	            			</h:panelGrid>
            			</p:panel>
            		
            		</p:tab>
           		
           		
            		<p:tab id="tbconfirm" title="Confirmação">  
            			<p:panel header="Confirmação">
            				
    							<legend>Estabelecimento</legend>
	            				<h:panelGrid columns="2" cellpadding="2" cellspacing="2" columnClasses="rotulo,campo" style="width: 100%">
									
									<h:outputLabel value="Tipo de Estabelecimento"/>
									<h:outputLabel value="#{contratoBean.contratoSelecionado.estabelecimento.tipo.descricao}" />
									
									<h:outputLabel value="Descrição do Estabelecimento"/>
									<h:outputLabel value="#{contratoBean.contratoSelecionado.estabelecimento.descricao}"/>
									
						    		<h:outputLabel value="Endereço"/>
									<h:outputLabel value="#{contratoBean.contratoSelecionado.estabelecimento.endereco.tipoLogradouro.descricao} #{contratoBean.contratoSelecionado.estabelecimento.endereco.logradouro}"/>
						    		
									<h:outputLabel value="Número"/>
									<h:outputLabel value="#{contratoBean.contratoSelecionado.estabelecimento.endereco.numero}"/>
									
									<h:outputLabel value="Complemento"/>
									<h:outputLabel value="#{contratoBean.contratoSelecionado.estabelecimento.endereco.complemento}"/>
									
									<h:outputLabel value="Bairro"/>
									<h:outputLabel value="#{contratoBean.contratoSelecionado.estabelecimento.endereco.bairro}"/>
									
									<h:outputLabel value="Municipio"/>
									<h:outputLabel value="#{contratoBean.contratoSelecionado.estabelecimento.endereco.municipio}"/>
									
									<h:outputLabel value="CEP"/>
									<h:outputLabel value="#{contratoBean.contratoSelecionado.estabelecimento.endereco.cep}"/>
									
									<h:outputLabel value="UF"/>
									<h:outputLabel value="#{contratoBean.contratoSelecionado.estabelecimento.endereco.uf.nomeUF}"/>
							    				 
								</h:panelGrid>
							
    							<legend>Serviço contratado</legend>
								
								<h:panelGrid columns="2" cellpadding="2" columnClasses="rotulo,campo" style="width: 100%">
									
		           		 			<h:outputText value="" />
									<h:outputLabel value="#{contratoBean.servicoSelecionado.tipo.descricao}" />
			        					 
			           		 	</h:panelGrid>
			           		 		
								<h:panelGroup rendered="#{contratoBean.servicoLimpezaFoiSelecionado}">
									<h:panelGrid columns="2" cellpadding="2" columnClasses="rotulo,campo" style="width: 100%">
									
			           		 			<h:outputLabel value="Quant. horas dia"/>
			           		 			<h:outputLabel value="#{contratoBean.qtdHorasDia}"/>
			           		 			
										<h:outputLabel value="Agenda semanal"/>
										<h:outputLabel value="#{contratoBean.diasSemanaSelecionadoFormatado}" />
			        					 
			           		 		</h:panelGrid>
	           		 			</h:panelGroup>
							
           		 			
    							<legend>Cliente</legend>
	           		 			<h:panelGrid columns="2" cellpadding="2" columnClasses="rotulo,campo" style="width: 100%">
	           		 			
									<h:outputLabel value="Nome" />
									<h:outputLabel value="#{contratoBean.contratoSelecionado.contratante.nome}"/>
									
									<h:outputLabel value="CPF"/>
									<h:outputText value="#{contratoBean.contratoSelecionado.contratante.cpfCnpj.numero}">
										<f:converter converterId="CpfCnpjConverter"/>
									</h:outputText>
									
									<h:outputLabel value="Sexo"/> 
									<h:outputLabel value="#{contratoBean.contratoSelecionado.contratante.sexo.descricao}"/>
									
						    		<h:outputLabel value="Endereço"/>
									<h:outputLabel value="#{contratoBean.contratoSelecionado.contratante.endereco.tipoLogradouro.descricao} #{contratoBean.contratoSelecionado.contratante.endereco.logradouro}"/>
						    		
									<h:outputLabel value="Número"/>
									<h:outputLabel value="#{contratoBean.contratoSelecionado.contratante.endereco.numero}"/>
									
									<h:outputLabel value="Complemento"/>
									<h:outputLabel value="#{contratoBean.contratoSelecionado.contratante.endereco.complemento}"/>
									
									<h:outputLabel value="Bairro"/>
									<h:outputLabel value="#{contratoBean.contratoSelecionado.contratante.endereco.bairro}"/>
									
									<h:outputLabel value="Municipio"/>
									<h:outputLabel value="#{contratoBean.contratoSelecionado.contratante.endereco.municipio}"/>
									
									<h:outputLabel value="CEP"/>
									<h:outputLabel value="#{contratoBean.contratoSelecionado.contratante.endereco.cep}"/>
									
									<h:outputLabel value="UF"/>
									<h:outputLabel value="#{contratoBean.contratoSelecionado.contratante.endereco.uf.nomeUF}"/>
									
									
				    				<h:outputLabel value="Telefone fixo"/>
				    				<h:outputLabel value="#{contratoBean.contratoSelecionado.contratante.telefoneRes}"/>
				    				
									<h:outputLabel value="Telefone celular"/>
				    				<h:outputLabel value="#{contratoBean.contratoSelecionado.contratante.telefoneCel}"/>
								
								
									<h:outputLabel value="E-Mail"/>
									<h:outputLabel value="#{contratoBean.contratoSelecionado.contratante.email}"/>
									 
					        	</h:panelGrid>
				        	
    							<legend>Contrato</legend>
					        	<h:panelGrid columns="2" cellpadding="2" columnClasses="rotulo,campo" style="width: 100%">
					        	
		            				<h:outputLabel value="Valor contrato"/>
		            				<h:outputText value="#{contratoBean.contratoSelecionado.valorContrato}" 
												style="text-align: right" 
												size="21" maxlength="21">
										<f:convertNumber type="number" locale="pt_BR" minFractionDigits="2"/>
									</h:outputText>
									
									<h:outputLabel value="Data inicio serviço"/>
									<h:outputText value="#{contratoBean.contratoSelecionado.dataInicioVigencia}">
										<f:convertDateTime pattern="dd/MM/yyyy"/>
									</h:outputText>
									
									<h:outputLabel value="" />
									
									<h:outputLabel value="Observação" for="observacao"/>
				  					<h:outputLabel value="#{contratoBean.contratoSelecionado.observacao}"/>
				  					
		            			</h:panelGrid>
	            			
				    		<div class="hero-unit">
            					<h:commandButton  value="Confirmar" onclick="wiz.loadStep (wiz.cfg.steps [0], true); dlgNovoContratoSalvoSucesso.show()" actionListener="#{contratoBean.doSalvarNovo}"    styleClass="btn btn-primary">
            						<f:ajax render=":growl :frmListagem :frmContratoNovoSalvo"/>
            					</h:commandButton>
            				</div>
            			 </p:panel>  
            		</p:tab>
           		</p:wizard>
       		</h:panelGroup>
		</h:form>
		
		<!-- Contrato Novo Salvo com Sucesso !	-->
		<p:dialog id="basicDialog" header="Sucesso" widgetVar="dlgNovoContratoSalvoSucesso" >
			<h:form id="frmContratoNovoSalvo">
				<h3>Contrato salvo com sucesso !</h3>  
	    		<h4>Número do contrato: #{contratoBean.contratoSelecionado.id}</h4>
	    		<p>
	    			<p:commandButton value="Fechar"  update=":frmNovo" actionListener="#{contratoBean.doPrepararNovo}"  oncomplete="dlgNovoContratoSalvoSucesso.hide()" icon="ui-icon-triangle-1-w"/>
	    		</p>  
    		</h:form>
    		<p:ajax event="close" update=":frmNovo" oncomplete="wiz.loadStep (wiz.cfg.steps [0], true)" listener="#{contratoBean.dlgNovoContratoSalvoSucessoHandleClose}"/> 
		</p:dialog>  
    	
    	
    	<!-- Adicionar serviço extra	-->
		<p:dialog id="dialogTipoServicoExtra" 
				header="Serviço Extra" 
				widgetVar="dlgTipoServicoExtra" 
				resizable="false"  
             	width="300"
             	height="150"
             	showEffect="clip" 
             	hideEffect="fold">  
 				
 				<h:form>
 				
 					<p:selectManyCheckbox value="#{contratoBean.tiposServicosExtrasSelecionados}"  converter="omnifaces.GenericEnumConverter" layout="pageDirection" >  
						<f:selectItems value="#{contratoBean.tiposServicosExtras}"/>
					</p:selectManyCheckbox> 
					<p>
				  		<p:commandButton value="Ok" update=":frmEdicao"  actionListener="#{contratoBean.doNovoServicoExtraSelecionado}" oncomplete="dlgTipoServicoExtra.hide()" icon="ui-icon-check"/>
					</p>
	                
		        </h:form>
   		</p:dialog>	
   		
   		<!-- Data final para prestação de serviço	-->
		<p:dialog id="dialogDataFinalPrestacaoServico" 
				header="Data final para prestação de serviço" 
				widgetVar="dlgDataFinalPrestacaoServico" 
				resizable="false"  
             	width="600"
             	height="200"
             	showEffect="clip" 
             	hideEffect="fold">  
 				
 				<h:form>
 					<p:messages id="msg"/>
 					<h:panelGrid columns="2" cellpadding="5" style="margin-top: 10px">
	 					<p:outputLabel value="Data final prestação serviço" for="dtfimservpopup"/>
			    		<p:calendar id="dtfimservpopup" value="#{contratoBean.dataFimPrestacaoServico}"  mode="popup" showOn="button" pages="2"  pattern="dd/MM/yyyy" navigator="true" locale="pt_BR" showButtonPanel="true" />
			    		<h:outputText value="" />
				  		<p:commandButton value="Ok"  update="msg :frmEdicao"  actionListener="#{contratoBean.doFinalizarPrestacaoServico}" oncomplete="handleDataFinalPrestacaoServicoRequest(xhr, status, args)" icon="ui-icon-check"/>
 					</h:panelGrid>
		        </h:form>
   		</p:dialog>	
   		
   		<script type="text/javascript">  
		    function handleDataFinalPrestacaoServicoRequest(xhr, status, args) {  
		        if(!args.isOk) {  
		            jQuery('#dialogDataFinalPrestacaoServico').effect("shake", { times:3 }, 100);  
		        } else {  
		        	dlgDataFinalPrestacaoServico.hide();  
		            jQuery('#dialogDataFinalPrestacaoServico').fadeOut();
		        }  
		    }
		</script> 
	</ui:define>

</ui:composition>      
	
</html>